
import React from 'react';
import SeoHead from '../components/SeoHead';
import { useLocalization } from '../hooks/useLocalization';

interface StaticPageProps {
    pageKey: 'contact' | 'terms' | 'privacy';
}

const StaticPage: React.FC<StaticPageProps> = ({ pageKey }) => {
    const { t } = useLocalization();

    const pageContent = t(pageKey) as { title: string; description: string; content: string[] };

    return (
        <>
            <SeoHead 
                title={pageContent.title}
                description={pageContent.description}
            />
            <div className="bg-white dark:bg-gray-800 py-12">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
                    <article className="prose dark:prose-invert lg:prose-xl mx-auto">
                        <h1>{pageContent.title}</h1>
                        {pageContent.content.map((paragraph, index) => {
                            if (paragraph.startsWith('<h3>')) {
                                return <h3 key={index} dangerouslySetInnerHTML={{ __html: paragraph.replace('<h3>','').replace('</h3>','') }} />;
                            }
                             if (paragraph.startsWith('<h2>')) {
                                return <h2 key={index} dangerouslySetInnerHTML={{ __html: paragraph.replace('<h2>','').replace('</h2>','') }} />;
                            }
                            return <p key={index}>{paragraph}</p>;
                        })}
                    </article>
                </div>
            </div>
        </>
    );
};

export default StaticPage;
